/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="automl-detail__wrap">
        <page-title
            :return-btn="true"
            :return-title="_('返回AUTO ML实验列表')"
            :title-name="autoMlName"
            @return="_returnInteractFlow" />
        <div class="experiment__wrap  m-a20">
            <div class="common-title">
                <lang>实验参数</lang>
            </div>
            <div class="common-content-box">
                <div class="common-content">
                    <div class="left-title">
                        <lang>算法配置：</lang>
                    </div>
                    <div class="right-content">
                        {{ algorithm.algorithmName }}
                    </div>
                </div>
                <div class="common-content">
                    <div class="left-title">
                        <lang>实验目标：</lang>
                    </div>
                    <div class="right-content">
                        {{ objective.objectiveMetricName }}({{ objective.type }}):{{ objective.goal }}
                    </div>
                </div>
                <div class="common-content">
                    <div class="left-title">
                        <lang>任务限制：</lang>
                    </div>
                    <div class="right-content">
                        <span>{{ trainingInfo.parallelTrialCount }}(并行任务上限)、</span>
                        <span>{{ trainingInfo.maxTrialCount }}(任务总数上限)、</span>
                        <span>{{ trainingInfo.maxFailedTrialCount }}(任务失败上限)</span>
                    </div>
                </div>
            </div>
            <div class="detail-table__list">
                <div v-for="(item,index) in parametersList"
                     :key="index"
                     class="detail-table__container">
                    <div class="detail-table__title  b-l0"
                         :class="index===0?'b-l1':''">
                        {{ item.name }}
                    </div>
                    <div class="detail-table__content b-t0  b-l0"
                         :class="index===0?'b-l1':''">
                        {{ item.value }}
                    </div>
                </div>
            </div>
        </div>
        <div class="automldetail__image m-a20">
            <div class="common-title">
                <lang>实验结果</lang>
            </div>
            <iframe
                id="iframe"
                ref="visualToolIframeRef"
                :src="iframeUrl"
                class="automl__iframe"
                @load="hideIframeDom">
            </iframe>
        </div>
        <div class="automldetail__table  m-a20">
            <div class="common-title">
                <lang>实验任务详情</lang>
            </div>
            <sf-grid>
                <sf-table ref="table"
                          :options="options_fix">
                    <sf-table-column 
                        v-show="tableHeaderList.length>0"
                        type="index">
                        序号
                    </sf-table-column>
                    <sf-table-column 
                        v-for="(item,index) in tableHeaderList"
                        :key="index"
                        :data-index="item.name"
                        :default-width="100">
                        <lang>{{ item.name }}</lang>
                    </sf-table-column>
                </sf-table>
            </sf-grid>
        </div>
    </div>
</template>
<script>
import { getStorage } from 'src/util/local_storage';
import { deepClone } from 'src/util/deep_clone';
import pageTitle from 'src/home/mod_cluster/common/page_title/page_title';
import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
let PAGE_COUNT = 10;
export default {
    name: 'InteractAutoMlDetail',
    components: {
        pageTitle
    },
    data () {
        return {
            algorithm:{},
            objective:{},
            parameters:{},
            trainingInfo:{},
            parametersList:[],
            options_fix: {
                bufferView: false,

                // 配置这个后才可以实现保持勾选状态
                idProperty: 'id',
                selectionHide: true,
                pagination: {
                    local: true,
                    activePage: 1,
                    pageSize: PAGE_COUNT,
                    pageSizes: [Number('10'), Number('20'), Number('50')],
                    layout: [ 'pager', 'sizes', 'jumper']
                }

                // 配置这个后才可以实现保持勾选状态
            },
            trials:[],
            tableHeaderList:[]
        };
    },
    computed: {
        autoMlName () {
             return this.$route.query.autoMlName || '';
        },
        iframeUrl () {
            let autoMlInfo = JSON.parse(getStorage('autoMlInfo'));
            return autoMlInfo.detailUrl;
        }
    },
    mounted () {
         /* eslint-disable */
        setTimeout(()=>{
            this.hideIframeDom();
        },10000)
        this.getAutoMlExperimentDetail();
    },
    methods:{
        hideIframeDom(){
            this.hideDomSecond();
            this.hideDom();
        },
         async getAutoMlExperimentDetail () {
            let autoMlInfo = JSON.parse(getStorage('autoMlInfo'));
            let experimentID = autoMlInfo.id;
            const GET_EXPERIMENT_URL = trainingUrlAdapter(`autoMlExperiment/${experimentID}/detail`);
            this.$mask();
            let jsonData = await this.$ajax.get(GET_EXPERIMENT_URL);
            this.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            let {trainingInfo, trials} = data;
            this.trainingInfo = trainingInfo;
            this.algorithm = trainingInfo.algorithm;
            this.objective = trainingInfo.objective;
            this.parameters = trainingInfo.parameters;
         
            this.parametersList = this.getParametersList(trainingInfo);

            // 详情表格
            this.trials = trials;
            this.tableHeaderList = this.getDetailHeaderList();
            let detailList = this.getDetailContentList();
            let table = this.$refs.table;
            if (!table) {
                return;
            }
            table.loadData(detailList || []);
            table.getPagination().setTotal(detailList.length);
        },
        getParametersList (data) {
            let {parameters} = data;
            let list = [];
            if (parameters.length > 0) {
                 for (let i = 0; i < parameters.length; i++) {
                    let params = {};
                    params.name = parameters[i].name;
                    if (parameters[i].feasibleSpace.list) {
                        params.value = parameters[i].feasibleSpace.list;
                    } else {
                        let obj = parameters[i].feasibleSpace;
                        params.value = `${obj.min}~${obj.max}/step:${obj.step}`;
                    }
                    list.push(params);
                }
                list.unshift({
                    name:_('参数'),
                    value:_('取值范围')
                });
                return list;
            }
        },
        getDetailHeaderList () {
            let headList = this.trials[0];
            let list = [];
            if (headList.length > 0) {
                for (let i = 0; i < headList.length; i++) {
                    let obj = {
                        name:headList[i]
                    };
                    list.push(obj);
                }
            }
            return list;
        },
        getDetailContentList () {
            let detailList =  this.trials.slice(1, this.trials.length);
            let headList = this.trials[0];
            let list = [];
            for (let i = 0; i < detailList.length; i++) {
                let obj = {};
                for (let j = 0; j < detailList[i].length; j++) {
                    obj[headList[j]] = detailList[i][j];
                }
                list.push(obj);
            }
            return list;
        },
        _returnInteractFlow () {
            let query = deepClone(this.$route.query);
            delete query.pipeline_id;
            delete query.autoMlName;
            this.$router.push({
                path: `/project_manager/project_index/interact_auto_ml`,
                query: Object.assign(query)
            });
        },
        hideDomSecond(){
            let _iframe = document.getElementById('iframe');
            let  jss9 = _iframe.contentWindow.document.getElementsByClassName('jss9');   //get iframe下的id
            for (let i = 0; i < jss9.length; i++) {
                jss9[i].style.display = 'none';
            }
            let  jss27 = _iframe.contentWindow.document.getElementsByClassName('MuiPaper-root');   //get iframe下的id
            for (let i = 0; i < jss27.length; i++) {
                jss27[i].style.display = 'none';
            }
            let  jss6 = _iframe.contentWindow.document.getElementsByClassName('jss6');   //get iframe下的id
            for (let i = 0; i < jss6.length; i++) {
                jss6[i].style.padding = '0px';
            }
            let root = _iframe.contentWindow.document.getElementById('root');
            root.style.background = '#fff';
            
        },
        hideDom(){
            let _iframe = document.getElementById('iframe');
            let  jss10 = _iframe.contentWindow.document.getElementsByClassName('MuiGrid-root');   //get iframe下的id
            for (let i = 0; i < jss10.length; i++) {
                jss10[i].style.display = 'none';
            }
            let MuiPaperRoot = _iframe.contentWindow.document.getElementsByClassName('MuiPaper-root');   //get iframe下的id
             for (let i = 0; i < MuiPaperRoot.length; i++) {
                MuiPaperRoot[i].style.display = 'none';
            }
            let  js8 = _iframe.contentWindow.document.getElementsByClassName('MuiTypography-h5');   //get iframe下的id
            for (let i = 0; i < js8.length; i++) {
                js8[i].style.display = 'none';
            }
            let  plotlyjsicon  = _iframe.contentWindow.document.getElementsByClassName('plotlyjsicon');   //get iframe下的id
            for (let i = 0; i < plotlyjsicon .length; i++) {
                plotlyjsicon [i].style.display = 'none';
            }
        }
    }
};
</script>
<style lang="less">
.automl-detail__wrap {
    // height: 100%;
    overflow: auto;
    .automldetail__image{
        margin-top: 0;
        margin-bottom: 0;
    }
    .automldetail__table{
        margin-top: 0;
    }
 
    .automl__iframe {
        width: 100%;
        height: 626px;
        border: none;
        border-radius: 4px;
    }
     .common-title{
        font-weight: bold;
        color: #14161A;
        font-size: 14px;
        margin-bottom:5px;
    }
    .left-title{
        width: 75px;
    }
    .right-content{
        color: #14161A;
        display: flex;
    }
    .common-content-box{
            /* margin-left: 24px; */
        .common-content{
            display: flex;
            margin: 12px 0;
        }
      
    }
    .detail-table__list{
        display: flex;
    }
    .detail-table__container{
        .detail-table__title{
            background: #f9f9f9;
        }
        .detail-table__title,.detail-table__content{
            border:1px solid #dee3ed;
            width: 120px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            &.b-t0{
                border-top:0;
            }
             &.b-l0{
                border-left:0;
            }
             &.b-l1{
                border-left:1px solid #dee3ed;
            }
        }
    }
    .automldetail__table{
        .sfv-pagination__wrapper{
            bottom: 1px;
        }

    }
}
</style>
